<template>
	<view class="content">
		<image class="bg-image" mode="scaleToFill" src="/static/bg.jpg"></image>
		<text class="text-tip animate__animated animate__backInDown">选择角色</text>
		<view
			class="menu"
			:class="index % 2 == 0 ? 'animate__animated animate__backInLeft' : 'animate__animated animate__backInRight'"
			v-for="(item, index) in roleAlias"
			:key="index"
			@click="selectRole(item)"
		>
			<image class="img-icon" :src="'/static/role/' + item + '.png'" mode="scaleToFill"></image>
			<text class="text-role">{{ roleName(item) }}</text>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import common from '@/utils/common.js';
import rolejs from '@/api/role.js';
export default {
	data() {
		return {};
	},
	computed: {
		...mapGetters(['roleAlias', 'userList', 'menuNames', 'token'])
	},
	onLoad() {
		// #ifdef MP
		//未登录转登录页面，已登录转主页面
		if (!this.$store.dispatch('checkIndentity')) return;
		// #endif
	},
	methods: {
		//角色名称
		roleName(name) {
			switch (name) {
				case 'driver':
					return '我是司机';
				case 'user':
					return '我是业务员';
				case 'admin':
					return '我是管理员';
			}
		},
		getRoleString(roleType) {
			let type = 0;
			switch (roleType) {
				case 'admin':
					type = 3;
					break;
				case 'user':
					type = 2;
					break;
				case 'driver':
					type = 1;
					break;
			}
			return type;
		},
		//选择角色
		async selectRole(roleType) {
			//修改角色类型
			let res = await rolejs.changeRoleType(this.getRoleString(roleType),this.token);
			if (common.httpIsWrong(res)) return;
			//页面跳转
			let switch2 = roleType == 'user' ? this.userList : [];
			let switch3 = roleType == 'user' ? this.menuNames : [];
			this.$store.commit('SET_SWITCH_1', [roleType]);
			this.$store.commit('SET_SWITCH_2', switch2);
			this.$store.commit('SET_SWITCH_3', switch3);
			let that = this;
			uni.showToast({
				icon: 'none',
				title: '登陆成功',
				success() {
					setTimeout(() => {
						that.$store.dispatch('roleToPage');
					}, 500);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.bg-image {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 0;
	}
	.text-tip {
		z-index: 1;
		color: white;
		font-size: 36rpx;
		font-weight: bold;
		margin: 50rpx 0;
	}
	.menu {
		z-index: 1;
		margin: 20rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		.img-icon {
			margin-top: 30rpx;
			width: 240rpx;
			height: 240rpx;
			border-radius: 50%;
		}
		.text-role {
			color: white;
			font-weight: bold;
		}
	}
}
</style>
